<template>
  <div class="login_page">
    <el-card :body-class="'login_card'">
      <div class="hydl_text">欢迎登录</div>
      <div class="bottom_box">

        <div class="single_row">
          <img class="left_img" src="../assets/img/login/user.png"/>
          <div class="single_right">
            <el-input style="width: 240px;height: 40px;" v-model="userName"></el-input>
          </div>
        </div>

        <div class="single_row">
          <img class="left_img" src="../assets/img/login/pass.png"/>
          <div class="single_right">
            <el-input  type="password" style="width: 240px;height: 40px;" v-model="password" show-password></el-input>
          </div>
        </div>

        <div class="single_row">
          <img class="left_img" src="../assets/img/login/yanzhengma.png"/>
          <div class="single_right" style="display: flex;">
            <el-input style="width: 90px;height: 40px;" v-model="yanzhengma"></el-input>
            <verificationCode  style="margin-left: 10px;"  :identifyCode="yzmCode"></verificationCode>
          </div>
        </div>

      </div>
      <div class="button_box">
        <el-button @click="submit" :icon="Finished" size="large" type="primary">提交</el-button>
        <el-button @click="reset" style="margin-left: 60px;" :icon="Refresh" size="large" type="info">重置</el-button>
      </div>


    </el-card>


  </div>

</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'
import {Finished, Refresh, Search} from "@element-plus/icons-vue";
import verificationCode from "./VerificationCode.vue"
import { useRouter }  from 'vue-router'
const router=useRouter()
const userName = ref('')
const password = ref('')
const yanzhengma = ref('')
const yzmCode=ref('')
const submit=()=>{
  router.push('/fistPage')
}
const reset=()=>{
  userName.value = ''
  password.value =''
  yanzhengma.value=''
}
const createCode=()=> {
  let text = "";
  let possible =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  // 设置验证码长度，
  for (let i = 0; i < 4; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  console.log(text)
  yzmCode.value = text;
}

onMounted(() => {
   userName.value = 'admin'
   password.value ='admin@123'
   yanzhengma.value='4462'
  createCode();
})

</script>
<style lang="scss" scoped>
.login_page {
  background-image: url("../assets/img/login/main_bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .hydl_text {
    font-size: 60px;
    color: rgb(117, 157, 192, 1);
    letter-spacing: 16px;
  }

  .bottom_box {
    margin-top: 20px;
    .single_row {
      height: 60px;
      line-height: 60px;
      display: flex;
      align-items: center;

      .left_img {
        width: 40px;
        height: 40px;
      }

      .single_right {
        margin-left: 20px;
      }
    }
  }
  .button_box{
     display: flex;
    margin-top: 30px;
  }

  :deep(.el-card) {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
</style>
<style>
.login_card {
  width: 580px;
  height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
